<template>
  <div class="main min-h-screen flex flex-col">
    <Header></Header>

    <main class="container grow max-w-[1500px] mt-6 mx-auto pl-8 py-4">
      <div class="grid grid-cols-9 gap-2 w-full">
        <!-- 左边栏 -->
        <div class="rounded-lg opacity-90 hidden lg:block mr-4 col-span-2 inset-0">
          <!-- container -->
          <div id="accordion-flush" class="bg-white opacity-90 rounded-lg sticky top-4" data-accordion="collapse"
            data-active-classes="bg-white dark:bg-gray-900 text-[#f5b62dde] dark:text-white"
            data-inactive-classes="text-gray-500 dark:text-gray-400">
            <!-- catalogs -->
            <div v-for="catalog in catalogs" :key="catalog.id">
              <!-- title -->
              <h2 :id="'accordion-flush-heading-' + catalog.id">
                <button type="button"
                  class="catalog-title  flex items-center justify-between w-full rounded-lg py-2 pl-4 pr-2 font-medium rtl:text-right hover:bg-blue-200  transition-all duration-300 gap-3"
                  :data-accordion-target="'#accordion-flush-body-' + catalog.id" aria-expanded="true"
                  :aria-controls="'accordion-flush-body-' + catalog.id">
                  <span v-html="catalog.title"></span>
                  <svg data-accordion-icon class="w-3 h-3 rotate-90 shrink-0" aria-hidden="true"
                    xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="M9 5 5 1 1 5" />
                  </svg>
                </button>
              </h2>
              <!-- content -->
              <ul :id="'accordion-flush-body-' + catalog.id" class="hidden pl-2"
                :aria-labelledby="'accordion-flush-heading-' + catalog.id">
                <!-- 二级目录标题 -->
                <li v-for="(childCatalog, index2) in catalog.children" :key="childCatalog.id"
                  v-html="childCatalog.title" @click="goWikiArticleDetailPage(childCatalog.articleId)"
                  :class="[childCatalog.articleId == route.query.ArticleId ? 'text-[#f5b62dde]' : '']"
                  class="cursor-pointer pl-4 text-gray-500 hover:text-[#f5b62dde] transition duration-300"></li>
              </ul>
            </div>

          </div>
        </div>
        <!-- 中间栏 -->
        <div class=" xl:col-span-5 lg:col-span-6 col-span-8 pl-2 ">
          <article class="bg-white rounded-t-lg pt-2">
            <!-- 文章标题、Meta 信息 -->
            <div class="mt-5 pl-4 blog-font-cute">
              <h1 class=" font-bold text-3xl md:text-4xl mb-5 dark:text-gray-400">{{ article.title }}</h1>
              <div class="flex gap-3 md:gap-6 text-gray-400 items-center text-sm pb-3 
                                    border-b border-gray-100 dark:border-gray-800">
                <!-- 字数 -->
                <div class="flex items-center" data-tooltip-target="word-tooltip-bottom"
                  data-tooltip-placement="bottom">
                  <svg t="1701512226243" class="w-4 h-4 mr-1 icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="28617" width="48" height="48">
                    <path
                      d="M682.666667 85.333333l213.333333 213.333334v597.674666a42.368 42.368 0 0 1-42.368 42.325334H170.368A42.666667 42.666667 0 0 1 128 896.341333V127.658667C128 104.277333 146.986667 85.333333 170.368 85.333333H682.666667z m-85.333334 256v212.864L512 469.333333l-84.906667 85.333334L426.666667 341.333333H341.333333v341.333334h85.333334l85.333333-85.333334 85.333333 85.333334h85.333334V341.333333h-85.333334z"
                      p-id="28618" fill="#8a8a8a"></path>
                  </svg>
                  {{ article.totalWords }}
                </div>
                <div id="word-tooltip-bottom" role="tooltip"
                  class="absolute z-10 invisible inline-block px-3 py-2 text-xs font-medium text-white bg-gray-900 rounded shadow-sm opacity-0 tooltip dark:bg-gray-700">
                  总字数
                  <div class="tooltip-arrow" data-popper-arrow></div>
                </div>

                <!-- 阅读时长 -->
                <div class="hidden md:block">
                  <div class="flex items-center" data-tooltip-target="read-time-tooltip-bottom"
                    data-tooltip-placement="bottom">
                    <svg t="1701512553358" class="w-4 h-4 mr-1.5 icon" viewBox="0 0 1024 1024" version="1.1"
                      xmlns="http://www.w3.org/2000/svg" p-id="37812" width="48" height="48">
                      <path
                        d="M513 33.22c-265.1 0-480 214.9-480 480s214.9 480 480 480 480-214.9 480-480-214.9-480-480-480z m208.9 652.59c-11.05 19.13-35.51 25.69-54.64 14.64L474.1 588.93c-13.06-7.54-20.26-21.34-19.99-35.42 0-0.17-0.01-0.34-0.01-0.51V329.95c0-22.09 17.91-40 40-40s40 17.91 40 40v201.23l173.17 99.98c19.12 11.05 25.68 35.51 14.63 54.65z"
                        fill="#8a8a8a" p-id="37813"></path>
                    </svg>
                    {{ article.readTime }}
                  </div>
                  <div id="read-time-tooltip-bottom" role="tooltip"
                    class="absolute z-10 invisible inline-block px-3 py-2 text-xs font-medium text-white bg-gray-900 rounded shadow-sm opacity-0 tooltip dark:bg-gray-700">
                    阅读时长
                    <div class="tooltip-arrow" data-popper-arrow></div>
                  </div>
                </div>

                <!-- 发布时间 -->
                <div class="flex items-center" data-tooltip-target="publish-time-tooltip-bottom"
                  data-tooltip-placement="bottom">
                  <svg t="1701513012543" class="w-[18px] h-[18px] mr-1 icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="41600" width="48" height="48">
                    <path
                      d="M725.333333 170.666667h74.709334C864.853333 170.666667 917.333333 223.189333 917.333333 288.096V799.893333C917.333333 864.757333 864.832 917.333333 800.042667 917.333333H223.957333C159.146667 917.333333 106.666667 864.810667 106.666667 799.904V288.106667C106.666667 223.242667 159.168 170.666667 223.957333 170.666667H298.666667v-32a32 32 0 0 1 64 0v32h298.666666v-32a32 32 0 0 1 64 0v32z m0 64v32a32 32 0 0 1-64 0v-32H362.666667v32a32 32 0 0 1-64 0v-32h-74.709334A53.354667 53.354667 0 0 0 170.666667 288.096V799.893333A53.301333 53.301333 0 0 0 223.957333 853.333333h576.085334A53.354667 53.354667 0 0 0 853.333333 799.904V288.106667A53.301333 53.301333 0 0 0 800.042667 234.666667H725.333333z m-10.666666 224a32 32 0 0 1 0 64H309.333333a32 32 0 0 1 0-64h405.333334zM586.666667 618.666667a32 32 0 0 1 0 64H309.333333a32 32 0 0 1 0-64h277.333334z"
                      fill="#8a8a8a" p-id="41601"></path>
                  </svg>
                  {{ article.createTime }}
                </div>
                <div id="publish-time-tooltip-bottom" role="tooltip"
                  class="absolute z-10 invisible inline-block px-3 py-2 text-xs font-medium text-white bg-gray-900 rounded shadow-sm opacity-0 tooltip dark:bg-gray-700">
                  发布时间
                  <div class="tooltip-arrow" data-popper-arrow></div>
                </div>

                <!-- 分类 -->
                <div class="flex items-center" data-tooltip-target="category-tooltip-bottom"
                  data-tooltip-placement="bottom">
                  <svg t="1701513357854" class="w-4 h-4 mr-1.5 icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="50560" width="48" height="48">
                    <path
                      d="M476.7232 112.503467L121.634133 279.825067a68.266667 68.266667 0 0 0 1.6896 124.279466l355.089067 155.648a68.266667 68.266667 0 0 0 54.818133 0l355.089067-155.6992a68.266667 68.266667 0 0 0 1.672533-124.279466l-355.089066-167.253334a68.266667 68.266667 0 0 0-58.197334 0zM150.7328 341.572267l355.089067-167.304534 355.072 167.253334-355.089067 155.6992-355.072-155.648zM860.842667 685.346133a34.133333 34.133333 0 0 1 28.962133 61.781334l-2.4064 1.1264-368.810667 155.682133a34.133333 34.133333 0 0 1-23.671466 1.0752l-2.8672-1.0752-368.7936-155.648a34.133333 34.133333 0 0 1 24.064-63.829333l2.491733 0.938666 355.498667 150.050134 355.5328-150.101334z"
                      fill="#444444" p-id="50561"></path>
                    <path
                      d="M853.333333 512l-341.486933 153.634133L170.666667 512.341333v55.210667c0 13.4656 7.748267 25.6512 19.712 30.9248l286.190933 126.976a78.7968 78.7968 0 0 0 35.2768 8.3968c12.049067 0 24.081067-2.798933 35.293867-8.3968l286.498133-127.249067A33.7408 33.7408 0 0 0 853.333333 567.278933V512z"
                      fill="#00B386" p-id="50562"></path>
                  </svg>
                  <a @click="goCategoryArticleListPage(article.categoryId, article.categoryName)"
                    class="cursor-pointer mr-1 hover:underline">{{ article.categoryName }}</a>
                </div>
                <div id="category-tooltip-bottom" role="tooltip"
                  class="absolute z-10 invisible inline-block px-3 py-2 text-xs font-medium text-white bg-gray-900 rounded shadow-sm opacity-0 tooltip dark:bg-gray-700">
                  分类
                  <div class="tooltip-arrow" data-popper-arrow></div>
                </div>

                <!-- 阅读量 -->
                <div class="flex items-center" data-tooltip-target="read-num-tooltip-bottom"
                  data-tooltip-placement="bottom">
                  <svg t="1701513523793" class="w-[18px] h-[18px] mr-1 icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="56112" width="48" height="48">
                    <path
                      d="M512 87.806c-234.721 0-424.194 189.474-424.194 424.194s189.474 424.194 424.194 424.194 424.194-189.474 424.194-424.194-189.474-424.194-424.194-424.194zM594.010 825.904c-18.382 12.725-25.452 8.484-12.725-4.242 11.312-12.725 83.425-103.22-29.694-168.263-36.763-21.21-49.49-72.113-49.49-83.425 0-12.725 2.829-18.382-7.069-14.141-8.484 2.829-195.13 91.908-41.007 265.828 9.899 11.312 5.655 14.141-12.725 5.655-419.953-224.822 137.155-579.732 145.639-583.974 8.484-5.655 5.655 2.829-1.414 16.967-12.725 25.452-45.248 164.022 41.007 220.582 87.668 56.56 213.509 172.507-32.522 345.012z"
                      p-id="56113" fill="#8a8a8a"></path>
                  </svg>
                  {{ article.readNum }}
                </div>
                <div id="read-num-tooltip-bottom" role="tooltip"
                  class="absolute z-10 invisible inline-block px-3 py-2 text-xs font-medium text-white bg-gray-900 rounded shadow-sm opacity-0 tooltip dark:bg-gray-700">
                  阅读量
                  <div class="tooltip-arrow" data-popper-arrow></div>
                </div>
              </div>
            </div>
          </article>

          <!-- 正文 -->
          <div ref="articleContentRef" v-viewer class="bg-white rounded-b-lg  article-content pt-5 pl-4 pr-2"
            v-html="article.content">
          </div>

          <!-- footer -->
          <div class="flex justify-center rounded-lg mt-5">
            <div class="basis-1/2">
              <!-- h-full 指定高度占满 -->
              <a v-if="preNextArticleInfo.preArticle" @click="goWikiArticleDetailPage(preNextArticleInfo.preArticle.articleId)"
                class="flex flex-col h-full p-4 mr-3 text-base font-medium transition-all duration-300  text-gray-500 bg-white border border-gray-300 rounded-lg hover:border-blue-500 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
                <div>
                  <svg class="inline w-3.5 h-3.5 mr-2 mb-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
                    fill="none" viewBox="0 0 14 10">
                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="M13 5H1m0 0 4 4M1 5l4-4"></path>
                  </svg>
                  上一篇
                </div>
                <div>{{ preNextArticleInfo.preArticle.articleTitle }}</div>
              </a>
            </div>

            <div class="basis-1/2">
              <!-- text-right 指定文字居右显示 -->
              <a v-if="preNextArticleInfo.nextArticle" @click="goWikiArticleDetailPage(preNextArticleInfo.nextArticle.articleId)"
                class="flex flex-col h-full text-right p-4 text-base font-medium transition-all duration-300  text-gray-500 bg-white border border-gray-300 rounded-lg hover:border-blue-500 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
                <div>
                  下一篇
                  <svg class="inline w-3.5 h-3.5 ml-2 mb-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
                    fill="none" viewBox="0 0 14 10">
                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="M1 5h12m0 0L9 1m4 4L9 9"></path>
                  </svg>
                </div>
                <div>{{ preNextArticleInfo.nextArticle.articleTitle }}</div>
              </a>
            </div>
          </div>



        </div>




        <div class="rounded-lg opacity-90 col-span-2  hidden xl:block">
          <TOC></TOC>
        </div>
      </div>


    </main>


    <div class="hidden md:block sticky bottom-0 right-0 w-full">
      <div class="absolute right-0 bottom-0">
        <live2d></live2d>
      </div>
    </div>
    <indexFooter class="z-10"></indexFooter>
  </div>
</template>

<script setup>
import Header from '@/composition/frontend/component/Header.vue';
import indexFooter from '@/composition/frontend/component/indexFooter.vue';
import TOC from '@/composition/frontend/component/TOC.vue';
import { useRoute, useRouter } from 'vue-router';
import { initAccordions } from 'flowbite';
import hljs from 'highlight.js';
import 'highlight.js/styles/tokyo-night-dark.css';
import { showMessage } from '@/composables/utils';
import { nextTick, onMounted, ref, watch } from 'vue';
import { getIndexPreNextArticle, getIndexWikiCatalogs } from '@/api/frontend/wiki';
import { getArticleDetail } from '@/api/frontend/article';



const route = useRoute()
const router = useRouter()

//====================================article渲染==============================
const article = ref({})
const refreshArticleDetail = (articleId) => {
  if (!articleId) return
  getArticleDetail({ articleId: articleId }).then(res => {  // 获取文章详情
    if (!res.success) {
      showMessage(res.msg, 'error')
      router.push({   // 404页面
        name: 'NotFound'
      })
      return
    }
    article.value = res.data
    nextTick(() => {  // 代码高亮
      let highlight = document.querySelectorAll('pre code')
      highlight.forEach(item => {
        hljs.highlightElement(item)
      })
      let preElements = document.querySelectorAll('pre')
      preElements.forEach(item => {
        let firstCode = item.querySelector('code')
        if (firstCode) {
          let copyBtn = '<button class="hidden copy-code-btn flex items-center justify-center"><div class="copy-icon"></div></button>'
          firstCode.insertAdjacentHTML('beforebegin', copyBtn)
          let btn = firstCode.previousSibling // 获取刚才插入的按钮
          btn.addEventListener('click', () => {
            // 点击复制
            btn.classList.add('copied')
            copyToClipboard(item.textContent)
            setTimeout(() => {
              btn.classList.remove('copied')
            }, 3000)
          })
        }
        // 添加事件监听
        item.addEventListener('mouseenter', handleMouseEnter)
        item.addEventListener('mouseleave', handleMouseLeave)
      })
    })
  })
}


const handleMouseEnter = (e) => { // 鼠标移入显示按钮
  let copyBtn = e.target.querySelector('.button')
  if (copyBtn) {
    copyBtn.classList.remove('hidden')
    copyBtn.classList.add('block')
  }
}
const handleMouseLeave = (e) => {  // 鼠标移出隐藏按钮
  let copyBtn = e.target.querySelector('.button')
  if (copyBtn) {
    copyBtn.classList.remove('block')
    copyBtn.classList.add('hidden')
  }
}
const copyToClipboard = (text) => {
  // 复制到剪贴板
  navigator.clipboard.writeText(text)
  showMessage('复制成功', 'success')
}

//====================================Wiki目录渲染==============================
const catalogs = ref([])
const initCatalogs = () => {
  getIndexWikiCatalogs({ id: route.params.wikiId }).then(res => {
    if (!res.success) {
      showMessage(res.message, 'error')
      return
    }
    catalogs.value = res.data
    // 数据获取成功后, 初始化 Accordion
    nextTick(() => {
      initAccordions()
    })
  })
}
const goWikiArticleDetailPage = (ArticleId) => {
  router.push({ path: '/wiki/' + route.params.wikiId, query: { ArticleId } })
}
//====================================上下页文章获取==============================
const preNextArticleInfo = ref({})
const getPreNextArticleInfo = () => {
  getIndexPreNextArticle({
    id: route.params.wikiId,
    articleId: route.query.ArticleId
  }).then(res => {
    if (!res.success) {
      showMessage(res.message, 'error')
      return
    }
    preNextArticleInfo.value = res.data
    console.log(res.data)
  })
}

onMounted(() => {
  refreshArticleDetail(route.query.ArticleId)
  initCatalogs()
  getPreNextArticleInfo()
})

watch(() => route.query.ArticleId, () => {
  refreshArticleDetail(route.query.ArticleId)
  initCatalogs()
  getPreNextArticleInfo()
})

</script>

<style scoped>
/* h1, h2, h3, h4, h5, h6 标题样式 */

::v-deep(.article-content h1) {
  font-weight: 700;
  font-synthesis: style;
  font-size: 28px;
  padding-bottom: 10px;
  font-family: 'cute_Cat';
}

::v-deep(.article-content h2) {
  font-weight: 700;
  font-synthesis: style;
  font-size: 24px;
  padding-bottom: 15px;
  font-family: 'cute_Cat';
}

::v-deep(.article-content h3) {
  font-size: 20px;
  margin-top: 40px;
  margin-bottom: 16px;
  font-weight: 600;
  font-family: 'cute_Cat';
}

::v-deep(.article-content h4) {
  font-size: 18px;
  margin-top: 30px;
  margin-bottom: 16px;
  font-weight: 600;
  font-family: 'cute_Cat';
}

::v-deep(.article-content h5) {
  font-size: 16px;
  margin-top: 30px;
  margin-bottom: 14px;
  font-weight: 600;
  font-family: 'cute_Cat';
}

::v-deep(.article-content h6) {
  font-size: 16px;
  margin-top: 30px;
  margin-bottom: 14px;
  font-weight: 600;
  font-family: 'cute_Cat';
}

::v-deep(.article-content p) {
  letter-spacing: .3px;
  margin: 0 0 10px;
  line-height: 30px;
  color: #4c4e4d;
  font-weight: 400;
  word-break: normal;
  word-wrap: break-word;
}

::v-deep(.article-content strong) {
  color: #f19123e1;
  font-family: 'cute_Cat';
  cursor: pointer;
  display: inline;
  background: linear-gradient(to right, #eef06eee,
      #3373e9) no-repeat right bottom;
  background-size: 0 2px;
  transition: background-size 1200ms;
}

/* ::v-deep(.article-content p)::after {
  display: block;
  content: '';
  width: auto;
} */

::v-deep(.article-content strong):hover {
  background-position: left bottom;
  background-size: 100% 2px;
}

/* 设置 blockquote 样式 */
::v-deep(.article-content blockquote) {
  border-left: 2.3px solid rgb(52, 152, 219);
  quotes: none;
  background: rgb(236, 240, 241);
  color: #777;
  font-size: 16px;
  margin-bottom: 20px;
  padding: 12px;
}

/* 设置 blockquote 中最后一个 p 标签的 margin-bottom 为 0 */
::v-deep(.article-content blockquote p:last-child) {
  margin-bottom: 0;
}

/* 斜体样式 */
::v-deep(.article-content em) {
  color: #167bc2;
  cursor: pointer;
  display: inline;
  background: linear-gradient(to right, #334a9c,
      #e3f160de) no-repeat right bottom;
  background-size: 0 2px;
  transition: background-size 1200ms;
}

::v-deep(.article-content em):hover {
  background-position: left bottom;
  background-size: 100% 2px;
}

::v-deep(.article-content em) {
  color: #c849ff;
}

/* 超链接样式 */
::v-deep(.article-content a) {
  color: #167bc2;
}

::v-deep(.article-content a:hover) {
  text-decoration: underline;
}

/* ul 样式 */
::v-deep(.article-content ul) {
  padding-left: 2rem;
}

::v-deep(.article-content > ul) {
  margin-bottom: 20px;
}

::v-deep(.article-content ul li) {
  list-style-type: disc;
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: 16px;
}

::v-deep(.article-content ul li p) {
  margin-bottom: 0 !important;
}

::v-deep(.article-content ul ul li) {
  list-style-type: square;
}

/* ol 样式 */
::v-deep(.article-content ol) {
  list-style-type: decimal;
  padding-left: 2rem;
}

/* 图片样式 */
::v-deep(.article-content img) {
  max-width: 100%;
  overflow: hidden;
  display: block;
  margin: 0 auto;
  border-radius: 8px;
}

::v-deep(.article-content img:hover,
  img:focus) {
  box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, .15);
}

/* 图片描述文字 */
::v-deep(.image-caption) {
  min-width: 20%;
  max-width: 80%;
  min-height: 43px;
  display: block;
  padding: 10px;
  margin: 0 auto;
  font-size: 13px;
  color: #999;
  text-align: center;
}

/* code 样式 */
::v-deep(.article-content code:not(pre code)) {
  padding: 2px 4px;
  margin: 0 2px;
  font-size: 95% !important;
  border-radius: 4px;
  color: rgb(41, 128, 185);
  background-color: rgba(27, 31, 35, 0.05);
  font-family: Operator Mono, Consolas, Monaco, Menlo, monospace;
}

/* 表格样式 */
::v-deep(table) {
  margin-bottom: 20px;
  width: 100%;
}

::v-deep(table tr) {
  background-color: #fff;
  border-top: 1px solid #c6cbd1;
}

::v-deep(table th) {
  padding: 6px 13px;
  border: 1px solid #dfe2e5;
}

::v-deep(table td) {
  padding: 6px 13px;
  border: 1px solid #dfe2e5;
}

::v-deep(table tr:nth-child(2n)) {
  background-color: #f6f8fa;
}

/* hr 横线 */
::v-deep(hr) {
  margin-bottom: 20px;
}

/* pre code 样式 */
::v-deep(code) {
  font-size: 98%;
}

::v-deep(pre) {
  margin-bottom: 20px;
}

::v-deep(pre code.hljs) {
  padding-top: 2rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-bottom: 0.7rem;
  border-radius: 6px;
}

::v-deep(pre:before) {
  background: #fc625d;
  border-radius: 50%;
  box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
  content: ' ';
  height: 10px;
  margin-top: 10px;
  margin-left: 10px;
  position: absolute;
  width: 10px;
}

.rotate-180 {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.catalog-title:focus-visible {
  outline: none;
}
</style>